<%@ page language= "java" %>
<%@ page import = "beans.*" %> 
<%@page contentType="text/html; charset=UTF-8" %> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7.5" />
<meta content="it" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Where Are Your Sport Pals?</title>
<style type="text/css">

body {
	color: #0000FF;
	background: url(webimages/sfondo.jpg);
	background-position: center top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #000000;
}

#map {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	position: absolute;
	z-index: -1;
}

#main {
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -380px;
}

#header {
	position: absolute;
	left: 22px; 
	top: 0px;
	background-image: url('webimages/header.jpg');
	background-repeat: no-repeat;
	background-position: center;
	width: 716px;
	height: 187px;
}

#mainarea {
	background-image: url('webimages/sfondomappa1.png');
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 200px;
	z-index: -2;
}



.form-table {
	margin-left: 0px;
	padding-top: 0px;
}
.inputtext {
	margin-left: 0px;
}


.hide {
	display: none;
}

.show {
	display: block;
}

</style>

<%
String lat = request.getParameter("lat");
String lng = request.getParameter("lng");
String zoom = request.getParameter("zoom");


String activity = request.getParameter("activity");
String city = request.getParameter("city");
String countryName = request.getParameter("countryName");

%>



<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/auto.js" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/map.js"></script>


<link rel="stylesheet" type="text/css" href="css/auto.css"/>



<script type="text/javascript">
var lat = <%= lat%>;
var lng = <%= lng%>;
var zoom = <%= zoom%>;
</script>

<%@ include file="analytics.html" %>







</head>

<body onload="init()">

<div id="main">
<div id="header"></div>


<div id="mainarea" style="height: 708px; width: 714px; position: absolute; left: 23px; top: 200px;">


<div id="form" style="position: absolute; left: 0px; top: 0px;">
<form id="searchform" action="result.jsp#map" method="get">
<div id="walking" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 27px; background-image: url('icons/walking.png'); background-repeat: no-repeat; background-position: center;"></div>
<div id="running" style="position: absolute; left: 32px; top: 0px; width: 27px; height: 27px; background-image: url('icons/running.png'); background-repeat: no-repeat; background-position: center;"></div>
<div id="cycling" style="position: absolute; left: 64px; top: 0px; width: 27px; height: 27px; background-image: url('icons/cycling.png'); background-repeat: no-repeat; background-position: center;"></div>

<input <% if(activity == null || activity.equalsIgnoreCase("walking")) out.print("checked=\"checked\""); %> name="activity" type="radio" value="walking" style="position: absolute; left: 3px; top: 28px;" />
<input <% if(activity != null && activity.equalsIgnoreCase("running")) out.print("checked=\"checked\""); %> name="activity" type="radio" value="running" style="position: absolute; left: 35px; top: 28px;" />
<input <% if(activity != null && activity.equalsIgnoreCase("cycling")) out.print("checked=\"checked\""); %> name="activity" type="radio" value="cycling" style="position: absolute; left: 67px; top: 28px;" />



<%
String city_text = "City";
String country_text = "State";
if(city != null && city.length() > 1)
	city_text = city;
if(countryName != null && countryName.length() > 1)
	country_text = countryName; 
%>


<input id="state_input_city" name="state_input_city" type="text" value="<%=city_text%>" style="position: absolute; left: 100px; top: 0px; width: 270px; height: 32px; font-family: Arial, Helvetica, sans-serif; color: #C0C0C0; font-size: 22pt;" onclick="state_input_city.value = ''; state_input_country.value= '';"/>
<div id="suggestions_city"></div>
<input id="state_input_country" name="state_input_country" type="text" value="<%=country_text%>" style="position: absolute; left: 390px; top: 0px; width: 270px; height: 32px; font-family: Arial, Helvetica, sans-serif; color: #C0C0C0; font-size: 22pt;" onclick="state_input_city.value = ''; state_input_country.value= '';"/>
<div id="suggestions_country"></div>

<div style="position: absolute; left: 674px; top: 0px; width: 40px; height: 39px; background-image: url('webimages/go.png'); background-repeat: no-repeat; background-position: center;" onclick="document.getElementById('searchform').submit()" onmouseover="this.style.backgroundImage = 'url(webimages/go-hover.png)'" onmouseout="this.style.backgroundImage = 'url(webimages/go.png)'"></div>
</form>
</div>





<div id="map" style="left: 3px; top: 82px; width: 708px; height: 613px;"></div>

</div>
	
<div id="link" style="position: absolute; left: 22px; top: 933px; width: 716px; height: 70px; border-style: none; z-index: -3">
<img alt="link" style="border-style: none;" src="webimages/link.jpg" usemap="#link"/>
<p style="text-align: right; color :#f5d000; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; ">Web Desing: <a target="_blank" style="color :#f5d000;" href="http://www.madisonav.it">www.madisonav.it</a><br/></p>
<p style="font-size: 4pt; line-height: 4px;"><br/></p>

<map id="linkmap" name="link">
  <area shape="rect" coords="5,35,138,60" alt="help"   onmouseover="document.getElementById('help').className = 'show'" />
  <area shape="rect" coords="150,35,280,60" alt="mail" onmouseover="document.getElementById('mail').className = 'show'" />
  <area shape="rect" coords="292,35,422,60" alt="facebook" onmouseover="document.getElementById('facebook').className = 'show'" />
  <area shape="rect" coords="434,35,564,60" alt="twitter" onmouseover="document.getElementById('twitter').className = 'show'" />
  <area shape="rect" coords="576,35,706,60" alt="linkedin" onmouseover="document.getElementById('linked').className = 'show'" />
</map>



<a href="help.html"><span id="help" class="hide" style="position: absolute; left: 3px; top: 30px; width: 140px; height: 35px; background-image: url('webimages/help.png'); background-repeat: no-repeat; background-position: center;" onmouseout="document.getElementById('help').className = 'hide'"></span></a>
<a target="_blank" href="mailto:mysportpals@gmail.com"><span id="mail" class="hide" style="position: absolute; left: 145px; top: 30px; width: 140px; height: 35px; background-image: url('webimages/mail.png'); background-repeat: no-repeat; background-position: center;" onmouseout="document.getElementById('mail').className = 'hide'"></span></a>
<a target="_blank" href="http://www.facebook.com/pages/MySportPals/104115753009469?v=wall"><span id="facebook" class="hide" style="position: absolute; left: 287px; top: 30px; width: 140px; height: 35px; background-image: url('webimages/facebook.png'); background-repeat: no-repeat; background-position: center;" onmouseout="document.getElementById('facebook').className = 'hide'"></span></a>
<a target="_blank" href="http://twitter.com/#!/mysportpals"><span id="twitter" class="hide" style="position: absolute; left: 429px; top: 30px; width: 140px; height: 35px; background-image: url('webimages/twitter.png'); background-repeat: no-repeat; background-position: center;" onmouseout="document.getElementById('twitter').className = 'hide'"></span></a>
<a target="_blank" href="http://www.linkedin.com/groups/mysportpals-3903938"><span id="linked" class="hide" style="position: absolute; left: 571px; top: 30px; width: 140px; height: 35px; background-image: url('webimages/linked.png'); background-repeat: no-repeat; background-position: center;" onmouseout="document.getElementById('linked').className = 'hide'"></span></a>

</div>



</div>


</body>

</html>
